<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <h2 ref="one">title == {{ title }}</h2>
        <my-head></my-head>
        <Parent></Parent>
    </div>

    <template id="parent">
        <div style="border: 1px solid salmon;padding: 15px;" v-if="show">
            <h2>Parent - 父组件</h2>
            <h2>count = {{count}}</h2>
            <h2>text={{text}}</h2>
            <h2>num=={{num}}</h2>
            <child-one :changetextinp="getNewText" :changenum="changenum" @changeshow="change" @countadd="countAdd"
                @aaa="getNewText"></child-one>
        </div>
    </template>

    <template id="childone">
        <div style="border:1px solid darkgoldenrod;padding:15px;">
            <h2>childone - 1 - 子组件 </h2>
            <button @click="changeCount">子组件修改父组件的count - 自定义事件 </button>
            <button @click="changeText">自定义事件 修改text </button>
            <button @click="changeShow">自定义事件 修改Show </button>
            <p>
                <button @click="changeParent">$parent 去修改父组件 </button>
            </p>
            <p>
                <button @click="changenum(88)">反向props 去修改父组件 </button>
            </p>
            <p>
                <input type="text" @input="changetextinp($event.target.value)">
            </p>
        </div>
    </template>
    <script>
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        Vue.component('Parent', {
            template: "#parent",
            data() {
                return {
                    count: 2000,
                    text: 'Are you OK',
                    show: true,
                    num: 888,
                }
            },
            methods: {
                countAdd(n) {
                    this.count += n;
                },
                getNewText(text) {
                    this.text = text;
                },
                change() {
                    this.show = !this.show;
                },
                changenum(num) {
                    this.num += num;
                }
            }
        })
        Vue.component('child-one', {
            template: '#childone',
            props: {
                changenum: Function,
                changetextinp: Function
            },
            methods: {
                changeCount() {
                    // 1.子组件发送事件
                    this.$emit('countadd', 20);
                },
                changeText() {
                    this.$emit('aaa', 'a123')
                },
                changeShow() {
                    this.$emit('changeshow')
                },
                changeParent() {
                    console.log(this.$parent);  // 当前实例的父亲实例 局限性
                    this.$parent.count++;
                    this.$parent.text = this.$parent.text.split('').reverse().join('')
                    this.$parent.show = false;
                }
            }
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '组件通信 - (子改父)',
                word: '2309',
                flag: true,
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                this.$refs.one.style.fontSize = '20px'
            }
        })
    </script>
    <!-- 
        子组件修改父组件
        组件系统 

        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit  发送
        On    监听 
        Once  只触发一次  

        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）

        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   v-on = @ 
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  反向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件中央总线   
        e.  vuex   
     -->
</body>

</html>